import {
  DeleteMenuService,
  GetMenuService,
  PatchMenuService,
  PostMenuService,
} from "@/service";
import { IStore } from "@/store";
import {
  Button,
  Card,
  Form,
  Input,
  InputNumber,
  message,
  Modal,
  Table,
} from "antd";
import { memo, useEffect, useState } from "react";
import { useSelector } from "react-redux";

const UserMenuPage = memo(() => {
  const [source, setSource] = useState<any[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalData, setModalData] = useState<any>({});
  const [form] = Form.useForm();
  const [operateTitle, setOperateTitle] = useState("");
  const { menu } = useSelector((state: IStore) => state.user);
  const showModal = () => {
    setIsModalOpen(true);
    form.setFieldsValue(modalData);
  };
  // const matches = useMatches();
  const handleOk = () => {
    if (operateTitle == "编辑") {
      PatchMenuService({
        ...modalData,
        created_at: new Date(),
      }).then((res: any) => {
        GetData();
        setIsModalOpen(false);
        message.success(res.msg);
      });
      return;
    }
    PostMenuService(modalData).then((res: any) => {
      GetData();
      setIsModalOpen(false);
      message.success(res.msg);
    });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      width: "70px",
    },
    {
      title: "菜单ID",
      dataIndex: "ID",
      width: "120px",
    },
    {
      title: "菜单名字",
      dataIndex: "name",
      width: "200px",
    },
    {
      title: "菜单图标",
      dataIndex: "icon",
      width: "200px",
    },
    {
      title: "菜单路径",
      dataIndex: "path",
      width: "200px",
    },
    {
      title: "文件路径",
      dataIndex: "file",
      width: "200px",
    },
    {
      title: "菜单父级",
      dataIndex: "is_parent",
      width: "120px",
    },
    {
      title: "操作",
      width: "100px",
      fixed: "right",
      render: (text: string, record: any, index: number) => {
        return (
          <div className="gap-3 flex">
            <Button
              size="small"
              onClick={() => {
                setModalData(record);
                showModal();
                setOperateTitle("编辑");
              }}
              type="primary"
            >
              编辑
            </Button>

            {record.is_parent != 0 && (
              <Button
                size="small"
                onClick={() => {
                  DeleteMenuService(record).then((res) => {
                    // TODO:: 删除菜单后的动作
                  });
                }}
                danger
              >
                删除
              </Button>
            )}
          </div>
        );
      },
    } as const,
  ];
  const FormConfig = [
    {
      label: "菜单名字",
      key: "name",
      type: "string",
      placeholder: "请输入菜单名字",
    },
    {
      label: "菜单路径",
      key: "path",
      type: "string",
      placeholder: "请输入菜单路径",
    },
    {
      label: "菜单图标",
      key: "icon",
      type: "string",
      placeholder: "请输入菜单图标",
    },
    {
      label: "菜单父级",
      key: "is_parent",
      type: "number",
      placeholder: "请输入父级ID",
    },
    {
      label: "文件路径",
      key: "file",
      type: "string",
      placeholder: "请输入菜单文件路径",
    },
  ];
  function GetData() {
    GetMenuService().then((res) => {
      const data = res.data.list.map((item: any) => {
        return {
          key: item.ID,
          ID: item.ID,
          name: item.name,
          icon: item.icon,
          file: item.file,
          path: item.path,
          is_parent: item.is_parent,
          children: item.children?.map((itemy: any) => {
            return {
              key: itemy.ID,
              ID: itemy.ID,
              name: itemy.name,
              file: itemy.file,
              path: itemy.path,
              is_parent: itemy.is_parent,
            };
          }),
        };
      });
      setSource(data);
    });
  }
  useEffect(() => {
    GetData();
    console.log("menu", menu);
  }, [menu]);
  return (
    <Card>
      <Button
        type="primary"
        onClick={() => {
          setOperateTitle("添加");
          setModalData({});
          setIsModalOpen(true);
        }}
      >
        添加
      </Button>
      <Table dataSource={source} columns={columns} />
      <Modal
        title={operateTitle + "菜单"}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form}>
          {FormConfig.map((item) => {
            return (
              <Form.Item key={item.key} label={item.label}>
                {item.type == "string" ? (
                  <Input
                    value={modalData[item.key]}
                    onChange={(val) => {
                      setModalData({
                        ...modalData,
                        [item.key]: val.target.value,
                      });
                    }}
                    placeholder={item.placeholder}
                  ></Input>
                ) : (
                  <InputNumber
                    value={modalData[item.key]}
                    onChange={(val) => {
                      setModalData({
                        ...modalData,
                        [item.key]: val,
                      });
                    }}
                    placeholder={item.placeholder}
                  ></InputNumber>
                )}
              </Form.Item>
            );
          })}
        </Form>
      </Modal>
    </Card>
  );
});

export default UserMenuPage;
